<link type="text/css" rel="stylesheet" href="/styles/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="/styles/jsgrid-theme.min.css" />
<script type="text/javascript" src="/js/jsgrid.min.js"></script>
<h1>已聚合的条目</h1>
<ol>
<% for(var i=0; i<data.length; i++){%>
<% var product_info = JSON.parse(data[i].parent_info);%>
  <li><%= product_info.brief_name%>
  <input type="hidden" value="<%= data[i].parent_sn%>" name="parent-sn" id="parent_sn">
  <input type="hidden" value="<%= data[i].id%>" name="id" id="id">
  </li>
  <%}%>
</ol>
<div id="jsGrid"></div>
<script>
  $('ol>li').click(function () {
    var sn = $(this).children('#parent_sn').val();
    var parent_id = $(this).children('#id').val();
    $.get('/api/product/classified/?sn='+sn, function (call) {
      console.log(call);
      var products = call;
      $("#jsGrid").jsGrid({
        width: "100%",
        height: "800px",

        inserting: false,
        editing: false,
        sorting: false,
        paging: true,
        selecting: true,
        filtering: false,
        data: products,

        fields: [
          {
            headerTemplate: function() {
              return $("<button>").attr("type", "button").text("聚合")
                .on("click", function () {
                  groupSelectedItems();
                });
            },
            itemTemplate: function(_, item) {
              return $("<input>").attr("type", "checkbox")
                .prop("checked", $.inArray(item, selectedItems) > -1)
                .on("change", function () {
                  $(this).is(":checked") ? selectItem(item) : unselectItem(item);
                });
            },
            align: "center",
            width: 50
          },
          { name: "brand", type: "text", width: 150, validate: "required" },
          { name: "brief_name", type: "text", width: 150 },
          { name: "category", type: "text", width: 150 },
          { name: "sn", type: "text", width: 100 },
          { name: "model", type: "text",width: 100 },
          { name: "pinyin", type: "text", width: 100},
          { name: "msrp", type: "text", width: 100},
        ],

        controllers: {
          loadData: function(filter) {

          }
        },
      });
      var selectedItems = [];

      var selectItem = function(item) {
        selectedItems.push(item);
      };

      var unselectItem = function(item) {
        selectedItems = $.grep(selectedItems, function(i) {
          return i !== item;
        });
      };

      var groupSelectedItems = function() {
        if(!selectedItems.length || !confirm("确认聚合这些产品?"))
          return;
        console.log('selected items:',selectedItems);
        groupSelectedItemsFromDb(selectedItems);

        var $grid = $("#jsGrid");
        $grid.jsGrid("option", "pageIndex", 1);
        $grid.jsGrid("loadData");

        selectedItems = [];
      };

      var groupSelectedItemsFromDb = function(selectedItems) {
//              db.clients = $.map(db.clients, function(client) {
//                return ($.inArray(client, deletingClients) > -1) ? null : client;
//              });
        var attr = prompt('输入聚类属性：')
        var child_sn = [];
        for (var i=0; i<selectedItems.length; i++) {
          child_sn.push(selectedItems[i].sn);
        }
        var reqBody = {
          parent_sn: selectedItems[0].sn,
          parent_info: JSON.stringify(selectedItems[0]),
          child_sn: JSON.stringify(child_sn),
          keyword: 'sub',
          attribute: attr,
          parent_id: parent_id,
        }
        console.log('reqbody:',reqBody);
        $.post('/api/product/classify/', reqBody, function (err, call) {
          console.log(call);
        })
      };
    })
  })
</script>
